模块热替换
简单说来,就是在不刷新浏览器下的情况下,动态更新修改的内容。
这里以css样式举例,服务器是webpack-dev-server,具体参见《开发环境》一章。
首先安装style-loader和css-loader,具体参见《资源管理》一章。
修改webpack.config.js文件:
//新增
var webpack = require('webpack');
devServer:{
hot:true
}
plugins:[new webpack.HotModuleReplacementPlugin()]
这样,在入口文件引入一个css文件,动态修改css文件,页面不刷新也是可以更新的。
通关浏览器控制台可以看到,热替换css是通过动态插入js文件,该文件修改style来实现的。